<!DOCTYPE html>
<html>
<head>
    <title>用户品牌信息表</title>
	<#include "/header.html">
    <!-- 引入相关css文件 -->
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/plugins/edit135/themes/96619a5672.css" />
</head>
<body>
<style>
    th{
        text-align: center;
    }
    .out1,in1{border:1px inset #ccc;height:20px;overflow-y:hidden;line-height:20px;width:100%}
    img {border-width: 0px 0px 0px 0px}


    .my-select {
        display: block;
        margin-right: 10px;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 34px;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .my-select:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    }
</style>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn">
            <div style="float: left">
                <input style="width: 120px" class="form-control" list="brandName" placeholder="品牌" id="brandNames">
                <datalist id="brandName" >

                </datalist>
            </div>
            &nbsp;&nbsp;&nbsp;
            <p style="float: left">&nbsp;</p>
            <p style="float: left">&nbsp;</p>
            <div style="float: left">
                <select style="height: 34px;" id="selectUserGzhList" v-model="q.gzhCode">

                </select>
            </div>
            <a class="btn btn-default" @click="query">查询</a>
			<#if shiro.hasPermission("sys:buserbrandinfo:save")>
            <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增品牌</a>
			</#if>
        </div>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

<div v-show="!showList" class="panel panel-default">
    <div class="panel-heading">{{title}}</div>
    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-2 control-label">品牌名称</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="bBrandInfo.brandName" placeholder="品牌名称"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">品牌logo</div>
            <div class="col-sm-10">
                <img id="brandLogo" width="100px" height="100px" />
                <!--<img width="200px" height="200px" id="img"/>-->
                <input type="file"  class="form-control" id='uploadImg' onchange="inserttx(this)"/>
            </div>
        </div>
        <#if shiro.hasPermission("sys:buserinfo:givevip")>
        <div class="form-group">
            <div class="col-sm-2 control-label">品牌行业</div>
            <div class="col-sm-10">
                <select class="form-control input-sm" id="bBrandCategory">

                </select>
            </div>
        </div>
        </#if>
        <div class="form-group">
            <div class="col-sm-2 control-label">文章分类</div>
            <div class="col-sm-10">
                <div class="out1" id="out1" exp="">
                    <div class="in1" id="in1" exp="" onmousemove="">
                    </div>
                </div>
                <input style="display: none" type="text" id="code" name="code"/>
                <div class="list" exp="">
                    <input class="browsers" list="type" onchange="xxx()" placeholder="文章分类"/>
                    <datalist id="type" class="chosen-select">

                    </datalist>
                </div>
            </div>
        </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">内部品牌</div>
        <div class="col-sm-10">
            <!-- v-model="bBrandInfo.linkBrandName"-->
            <input class="form-control" list="coverBrand" placeholder="补位品牌文章" id="linkBrandName">
            <datalist id="coverBrand" style="line-height: 10px">
<!--                <option v-for="(item,index) in coverBrand" :key="index" :value="item.brandName"></option>-->
            </datalist>
        </div>
    </div>
    <div class="form-group" style="display: none">
        <div class="col-sm-2 control-label">补位分类文章</div>
        <div class="col-sm-10">
            <input class="form-control" list="coverType" placeholder="补位分类文章" id="linkTypeName" v-model="bBrandInfo.linkTypeName">
            <datalist id="coverType" style="line-height: 10px">
<!--                <option v-for="(item,index) in coverType" :key="index" :value="item.articleTypeName"></option>-->
            </datalist>
        </div>
    </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">内部分类</div>
            <div class="col-sm-10">
                <select class="form-control input-sm my-select" id="supply" style="height: 34px">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label" style="color: red;">绑定品牌</div>
            <div class="col-sm-10">
                <div id="selectBrandNameList"></div>
                <input class="form-control" list="editBrandBinding" placeholder="请选择绑定品牌" id="selectBrandName">
                <datalist id="editBrandBinding" style="line-height: 10px"></datalist>
                <input type="button" onclick="addBrandName()" value="添加"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">别名</div>
            <div class="col-sm-10">
                <textarea type="text" class="form-control" rows="3" v-model="bBrandInfo.brandAlias" placeholder="别名（请用中文逗号隔开）"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">关键字</div>
            <div class="col-sm-10">
                <textarea type="text" class="form-control" rows="3" v-model="bBrandInfo.brandKeyWord" placeholder="关键字（请用英文逗号隔开）"> </textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">品牌描述</div>
            <div class="col-sm-10">
                <textarea v-model="bBrandInfo.brandDesc" placeholder="品牌描述"   rows="4" class="form-control"></textarea>
                <!--<input type="text" class="form-control" v-model="bBrandInfo.brandDesc" placeholder="品牌描述"/>-->
            </div>
        </div>

        <div class="form-group">
            <script id="editor" type="text/plain" style="width:1024px;"></script>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
            &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="back" value="返回"/>
        </div>
    </form>
</div>
</div>

<div id="brandShield" style="display: none">
    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-2 control-label">品牌ID</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="shieldBrandId" placeholder="品牌ID" readonly />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">品牌名称</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="shieldBrandName" placeholder="品牌名称" readonly />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">公众号</div>
            <div class="col-sm-10">
                <select class="form-control" id="gzhList"></select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <div class="col-sm-10">
                <input type="button" class="btn btn-primary" onclick="vm.saveShildBrand()" value="保存"/>
        &nbsp;&nbsp;      <input type="button" class="btn btn-warning" onclick="vm.cancle()" value="返回"/>
            </div>
        </div>
    </form>
</div>

<script language="javascript" defer>
    $(document).ready(function() {
        $("#code").val("");
        $('#in1').html("");
    });
    function selected(name,code) {
        var ids = $("#code").val();
        if(ids.indexOf(code) == -1){  //没有找到匹配的id
            $("#in1").append("<a href=# onclick=javascript:deleteCode("+code+");><div style='width:auto;float:left;' id="+code+">"+name+';'+" </div></a>");
            $("#"+code).hover(function(){
                $(this).css("background","yellow");},function(){
                $(this).css("background","white");
            });
            //添加隐藏域的值
            ids += code + ",";
            $("#code").val(ids);
        }
        $(".browsers").val(null);
    }
    function deleteCode(code){
        var ids = $("#code").val();
        $("#code").val(ids.replace(code+",",""));
        $("#"+code).remove();
    }
    function xxx() {
        var a=$(".browsers").val();
        console.log($("#"+a))
        var b=$("#"+a).text();
        console.log(b);
        selected(a,b);

    }

    function upload(file, pathname = 'ps') {
        console.log(file);
        const client = new window.OSS({
            region: 'oss-cn-shenzhen', // hangzhou, shanghai, shenzhen
            accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS',
            accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU',
            bucket: 'zktuistatic'
        });
        var date = new Date();
        var yeaer = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var datePath =yeaer+""+month+""+day;
        var key = "";
        key=pathname+"/"+datePath+"/image"+String(parseInt(Math.random() * 10000000, 10)+getFileExtendingName(file.name));
        client.put(key, file).then(function () {
            return client.get(key);
        }).then(function(ret) {
            console.log(ret.res.requestUrls[0]);
            vm.bBrandInfo.brandLogo=ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/","http://zktfile.wxslzf.com/");
            $("#brandLogo").attr("src", vm.bBrandInfo.brandLogo);

        }).catch(function(err) {
            console.log(err);
        });
    }
    function inserttx(e) {
        var files = e.files;
        var length = files.length;
        console.log("选择了" + length + "张图片");
        upload(files[0]);
    }
    function getFileExtendingName (filename) {
        // 文件扩展名匹配正则
        var reg = /\.[^\.]+$/;
        var matches = reg.exec(filename);
        if (matches) {
            return matches[0];
        }
        return '';
    };

    // 移除绑定品牌
    function delBrand(pId) {
        $("#pBrandName" + pId).remove();
    };

    // 添加绑定品牌
    function addBrandName() {
        let selectBrandName = $("#selectBrandName").val();

        if (selectBrandName.trim() == '') {
            alert('请选择品牌');
            return false;
        }

        if (selectBrandName.trim() == vm.bBrandInfo.brandName) {
            alert('不能绑定品牌自己');
            return false;
        }

        if ($(".pBrandName[value='" + selectBrandName + "']").length > 0) {
            alert('品牌已存在');
            return false;
        }

        let index = genID(6);//获取6位随机ID
        $("#selectBrandNameList").append("<p class='pBrandName' id='pBrandName" + index + "' value='" + selectBrandName + "'>" + selectBrandName + "&nbsp;<a href='javascript:void(0);' onclick='delBrand(" + index + ")'>删除</a></p>");
        $("#selectBrandName").val("");
    };

    function genID() {
        return Math.floor(Math.random() * (999999 - 100000)) + 100000;
    };

    $(function () {
        $.ajax({
            type: "POST",
            async: false,
            url: baseURL + 'sys/bbrandinfo/queryAll',
            contentType: "application/json",
            success: function (r) {
                if (r.code == 0) {
                    for (var i = 0; i < r.brandInfo.length; i++) {
                        $("#editBrandBinding").append(
                            "<option value=" + r.brandInfo[i].brandName + ">" + "</option>");
                    }
                }
            }
        });
    });
</script>
<script src="${request.contextPath}/statics/js/modules/sys/bese64.js"></script>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${request.contextPath}/statics/plugins/edit135/ueditor.config.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="${request.contextPath}/statics/plugins/edit135/third-party/jquery-3.3.1.min.js"></script>-->
<script type="text/javascript" charset="utf-8" src="${request.contextPath}/statics/plugins/edit135/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="${request.contextPath}/statics/plugins/edit135/a92d301d77.js"> </script>
<script>
    var appkey = '5e0d699a-3170-4210-b676-6dbbac10c65d';
    window.BASEURL = 'http://www.135editor.com';
    window.UEDITOR_HOME_URL = "/ueditor/jsp/upload/image/";
    window.current_editor = UE.getEditor('editor',{
        plat_host:'www.135editor.com',
        appkey:appkey,open_editor:true,pageLoad:true,
        style_url : BASEURL+'/editor_styles/open?inajax=1&appkey=' + appkey,
        style_width:340,
        uploadFormData:{'referer': window.document.referrer},

        initialFrameHeight:680,
        zIndex : 1000,
        focus:true,
        autoFloatEnabled:false,autoHeightEnabled:false,scaleEnabled:false,
        focusInEnd:true
    });

    // //编辑器加载完成之后
    // window.current_editor.addListener( 'ready', function( editor ) {
    //     var url = location.search;
    //     var articleId = url.split("=")[1];
    //     if(articleId!=0){
    //         loadData(articleId);
    //     }
    // } );
    // var appkey = '5e0d699a-3170-4210-b676-6dbbac10c65d';
    // window.BASEURL = 'http://www.135editor.com';
    // window.UEDITOR_HOME_URL = "/ueditor/jsp/upload/image/";
    // window.current_editor = UE.getEditor('editor',{
    //     plat_host:'www.135editor.com',
    //     appkey:appkey,
    //     open_editor:true,
    //     pageLoad:true,
    //     style_url : BASEURL+'/editor_styles/open?inajax=1&appkey=' + appkey,
    //     style_width:340,
    //     uploadFormData:{
    //         'referer': window.document.referrer
    //     },
    //     initialFrameHeight:680,
    //     zIndex : 1000,
    //     focus:true,
    //     autoFloatEnabled:false,
    //     autoHeightEnabled:false,
    //     scaleEnabled:false,
    //     focusInEnd:true
    // });
    //
    // //编辑器加载完成之后
    // window.current_editor.addListener( 'ready', function( editor ) {
    //     var url = location.search;
    //     var articleId = url.split("=")[1];
    //     if(articleId!=0){
    //         var test=1234567;
    //         window.current_editor.setContent(test);
    //     }
    // } );
</script>
<script src="${request.contextPath}/statics/js/modules/sys/buserbrandinfo.js?_${.now?long}"></script>
<!--<script>-->
<!--    $.ajax({-->
<!--        type: "POST",-->
<!--        async: false,-->
<!--        url: baseURL + 'sys/bbrandinfo/queryAll',-->
<!--        contentType: "application/json",-->
<!--        success: function (r) {-->
<!--            if (r.code == 0) {-->
<!--                vm.coverBrand = r.brandInfo;-->
<!--            }-->
<!--        }-->
<!--    });-->

<!--    $.ajax({-->
<!--        type: "POST",-->
<!--        async: false,-->
<!--        url: baseURL + 'sys/barticletypeinfo/queryAll',-->
<!--        contentType: "application/json",-->
<!--        success: function (r) {-->
<!--            if (r.code == 0) {-->
<!--                vm.coverType = r.barticletypeinfo;-->
<!--            }-->
<!--        }-->
<!--    });-->
<!--</script>-->
</body>
</html>
